<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>户籍管理系统</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script src="./bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- <script src="./"></script> -->
    <style>
        .container {
            margin: 1rem 1rem;

        }

        h2 {
            margin-left: 3rem;
        }

        h5 {
            margin-top: 1rem;
        }
    </style>
</head>

<!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

<body>
    <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
        <div class="container-fluid">
            <a class="navbar-brand">
                <h2>户籍管理系统</h2>
            </a>

            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search">
                <button class="btn btn-outline-primary" type="submit">搜索</button>
            </form>

        </div>
    </nav>

    <div class="row">
        <div class="col-2">
            <div class="list-group" id="list-tab" role="tablist">

                <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list"
                    href="#list-home" role="tab">系统用户管理</a>

                <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list"
                    href="#list-tianjia" role="tab">户籍信息添加<div></div> </a>

                <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list"
                    href="#list-profile" role="tab">户籍信息管理<div></div> </a>

                <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list"
                    href="#list-messages" role="tab">个人户籍查看</a>

                <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list"
                    href="#list-settings" role="tab"">户籍系统管理</a>
            </div>
        </div>

        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

        <div class=" col-9">
                    <div class="tab-content" id="nav-tabContent">

                        <div class="tab-pane fade show active" id="list-home" role="tabpanel">
                            <h5>系统用户管理</h5>
                            <div class="input-group mb-3">
                                <button class="btn btn-outline-secondary" type="button"
                                    id="button-addon1">Button</button>
                                <input type="text" class="form-control" placeholder="">
                            </div>

                            <div class="input-group mb-3">
                                <input type="text" class="form-control" placeholder="Recipient's username">
                                <button class="btn btn-outline-secondary" type="button"
                                    id="button-addon2">Button</button>
                            </div>

                            <div class="input-group mb-3">
                                <button class="btn btn-outline-secondary" type="button">Button</button>
                                <button class="btn btn-outline-secondary" type="button">Button</button>
                                <input type="text" class="form-control" placeholder="">
                            </div>

                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Recipient's username">
                                <button class="btn btn-outline-secondary" type="button">Button</button>
                                <button class="btn btn-outline-secondary" type="button">Button</button>
                            </div>
                        </div>


                        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->


                        <div class="tab-pane fade" id="list-tianjia" role="tabpanel">
                            <h5>户籍信息添加</h5>
                            <div class="row g-3">
                                <!-- <div class="col-md-6">
                            <label for="inputEmail4" class="form-label">Email</label>
                            <input type="email" class="form-control" id="inputEmail4">
                        </div>
                        <div class="col-md-6">
                            <label for="inputPassword4" class="form-label">Password</label>
                            <input type="password" class="form-control" id="inputPassword4">
                        </div> -->
                                <div class="col-3">
                                    <label for="inputAddress" class="form-label">姓名：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入姓名" value>
                                </div>
                                <div class="col-md-2">
                                    <label for="inputState" class="form-label">性别：</label>
                                    <select id="inputAddress" class="form-select">
                                        <option selected>男</option>
                                        <option>女</option>
                                    </select>
                                </div>
                                <div class="col-2">
                                    <label for="inputAddress" class="form-label">民族：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="汉">
                                </div>
                                <div class="col-5">
                                    <label for="inputAddress" class="form-label">身份证号：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入身份证号">
                                </div>
                                <div class="col-4">
                                    <label for="inputAddress" class="form-label">学号：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入学号">
                                </div>
                                <div class="col-4">
                                    <label for="inputAddress" class="form-label">手机号：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入手机号">
                                </div>
                                <div class="col-4">
                                    <label for="inputAddress" class="form-label">QQ号：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入QQ号">
                                </div>
                                <div class="col-6">
                                    <label for="inputAddress" class="form-label">学院：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入所在院系">
                                </div>
                                <div class="col-6">
                                    <label for="inputAddress" class="form-label">班级：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入班级">
                                </div>
                                <div class="col-12">
                                    <label for="inputAddress2" class="form-label">家庭住址：</label>
                                    <input type="text" class="form-control" id="inputAddress" placeholder="请输入家庭住址">
                                </div>
                                <!-- <div class="col-md-6">
                            <label for="inputCity" class="form-label">City</label>
                            <input type="text" class="form-control" id="inputCity">
                        </div>
                        -->
                                <!-- <div class="col-md-2">
                            <label for="inputZip" class="form-label">Zip</label>
                            <input type="text" class="form-control" id="inputZip">
                        </div> -->
                                <div class="col-12">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="gridCheck">
                                        <label class="form-check-label" for="gridCheck">
                                            确定信息无误
                                        </label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-primary">添加</button>

                                </div>
                            </div>
                        </div>

                        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

                        <div class="tab-pane fade" id="list-profile" role="tabpanel">
                            <!-- <h5>户籍信息管理</h5> -->
                            <h6>搜索:</h6>
                            <div class="col-6">
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" placeholder="请输入查询信息">
                                    <!-- <button class="btn btn-outline-secondary btn2" type="button"
                                        id="button-addon2">查询</button> -->
                                    <button class="btn1 btn-outline-secondary" type="button">模糊查询</button>
                                    <button class="btn2 btn-outline-secondary" type="button">查询全部</button>
                                </div>

                            </div>

                            <table id="table"
                                class="table table-bordered border-primary table-info table-striped caption-top col-10">
                                <caption>信息列表:</caption>
                                <thead>
                                    <tr>
                                        <th scope="co1">序号</th>
                                        <th scope="col">姓名</th>
                                        <th scope="col">性别</th>
                                        <th scope="col">民族</th>
                                        <th scope="col">身份证号</th>
                                        <th scope="col">学号</th>
                                        <th scope="col">手机号</th>
                                        <th scope="col">QQ号</th>
                                        <th scope="col">学院</th>
                                        <th scope="col">班级</th>
                                        <th scope="col">家庭住址</th>
                                        <th scope="col">操作</th>
                                        <th><button>返回</button></th>

                                    </tr>
                                </thead>

                                <tbody class="datalist">

                                </tbody>
                            </table>
                        </div>


                        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

                        <div class="tab-pane fade" id="list-messages" role="tabpanel">...
                        </div>

                        <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

                        <div class="tab-pane fade" id="list-settings" role="tabpanel">...
                        </div>
                    </div>
            </div>
        </div>
    </div>

    <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

    <!-- 添加信息 -->
    <script>
        const btn = document.querySelector('.btn-primary')
        const inputAll = document.querySelectorAll('#inputAddress')



        const xhr = new XMLHttpRequest()



        const dataArr = []
        btn.onclick = function (ev) {

            xhr.open('post', 'http://localhost:2021/api/tian_jia',
                true);


            xhr.onload = function () {

                const data = JSON.parse(xhr.responseText);
                if (data.code === 200) {
                    alert('添加成功！');
                } else {
                    alert("添加失败")
                }
            }
            // 设置json请求头
            xhr.setRequestHeader('Content-Type',
                'application/json')

            xhr.send(JSON.stringify({
                name: inputAll[0].value,
                gender: inputAll[1].value,
                nation: inputAll[2].value,
                id_number: inputAll[3].value,
                Student_number: inputAll[4].value,
                cell_phone_number: inputAll[5].value,
                QQ_number: inputAll[6].value,
                college: inputAll[7].value,
                class1: inputAll[8].value,
                Home_address: inputAll[9].value,
            }))

            //阻止浏览器默认行为
            // ev.preventDefault();

        }
    </script>

    <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

    <!-- 查询信息 -->
    <script>
        const btn1 = document.querySelector('.btn1')
        const btn2 = document.querySelector('.btn2')
        const datalist = document.querySelector('.datalist')
        const xhr1 = new XMLHttpRequest()
        const xhr2 = new XMLHttpRequest()
        const table = document.querySelector('#table')

        btn2.onclick = function () {
            xhr2.onload = function () {
                const data = JSON.parse(xhr2.responseText);

                // console.log('data=', data);
                const lis = data.map((item, index) => {
                    // item:每一条数据


                    return `
                        <tr>
                            <th scope="row">${index+1}</th>
                            <td>${item.name}</td>
                            <td>${item.gender}</td>
                            <td>${item.nation}</td>
                            <td>${item.id_number}</td>
                            <td>${item.Student_number}</td>
                            <td>${item.cell_phone_number}</td>
                            <td>${item.QQ_number}</td>
                            <td>${item.college}</td>
                            <td>${item.class1}</td>
                            <td>${item.Home_address}</td>
                            <td>
                                <button>修改</button>
                                <button id="remove" value=${item.id}>删除</button>
                            </td>

                            <td><button>返回</button></td>
                        </tr>               
                      `

                }).join('')

                datalist.innerHTML = lis

            }

            xhr2.open('get', 'http://localhost:2021/api/guan_li/guan',
                true);

            xhr2.send()
        }


        function render(){
            console.log('render');
            datalist.innerHTML = ''
            const xhr = new XMLHttpRequest()
            xhr.onload = function () {
                const data = JSON.parse(xhr.responseText);

                // console.log('data=', data);
                const lis = data.map((item, index) => {
                    // item:每一条数据


                    return `
                        <tr>
                            <th scope="row">${index+1}</th>
                            <td>${item.name}</td>
                            <td>${item.gender}</td>
                            <td>${item.nation}</td>
                            <td>${item.id_number}</td>
                            <td>${item.Student_number}</td>
                            <td>${item.cell_phone_number}</td>
                            <td>${item.QQ_number}</td>
                            <td>${item.college}</td>
                            <td>${item.class1}</td>
                            <td>${item.Home_address}</td>
                            <td>
                                <button>修改</button>
                                <button id="remove" value=${item.id}>删除</button>
                            </td>

                            <td><button>返回</button></td>
                        </tr>               
                      `

                }).join('')

                datalist.innerHTML = lis

            }

            xhr.open('get', 'http://localhost:2021/api/guan_li/guan',
                true);

            xhr.send()
        }



        btn1.onclick = function () {
            xhr1.onload = function () {
                const data = JSON.parse(xhr1.responseText);

                // console.log('data=', data);
                const lis1 = data.map((item, index) => {
                    // item:每一条数据


                    return `
                <tr>
                    <th scope="row">${index+1}</th>
                    <td>${item.name}</td>
                    <td>${item.gender}</td>
                    <td>${item.nation}</td>
                    <td>${item.id_number}</td>
                    <td>${item.Student_number}</td>
                    <td>${item.cell_phone_number}</td>
                    <td>${item.QQ_number}</td>
                    <td>${item.college}</td>
                    <td>${item.class1}</td>
                    <td>${item.Home_address}</td>
                    <td>
                        <button>修改</button>
                        <button id="remove" value=${item.id}>删除</button>
                    </td>

                    <td><button>返回</button></td>
                </tr>               
               `

                }).join('')

                datalist.innerHTML = lis1

            }

            xhr1.open('get', 'http://localhost:2021/api/guan_li/guan1',
                true);

            xhr1.send()
        }
    </script>

    <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

    <!-- 删除信息 -->
    <script>
        table.onclick = function (e) {
            // console.log('this=', e.target.id, e.target.value);
            if(e.target.innerText === '删除'){
                console.log(e.target);


            const xhr3 = new XMLHttpRequest
            if (confirm('确认删除')) {
                if (e.target.innerText == '删除') {

                    xhr3.onload = function () {
                        const data = JSON.parse(xhr2.responseText);
                        alert("删除成功");

                        render()
                    }

                    xhr3.open('delete', `http://localhost:2021/api/guan_li/${e.target.value}`,
                        true);

                    xhr3.send()
                }

                // render();
                // reload()
                // replace()
                // const item = e.target.value
                // item.value.remove(item)
            }

            }
            
        }
    </script>

</body>

</html>